<template>
  <div class="container">
    <NavBar :header-height="headerHeights" @doBack="doBack" :center-img="centerImg" class="nav-bar"></NavBar>
    <img :src="bannerImg" class="banner-bg" :style="{ height: `calc(40px + ${headerHeights})` }">
    <div class="content-wrapper" :style="{ height: contentHeight }">
      <van-tabs swipeable shrink :lazy-render="false">
        <van-tab :title="itm.title" v-for="(itm, idx) in videoList" :key="idx" lazy-render>
          <div class="content-box" v-if="showlist">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh(idx)">
              <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad(idx)"
                :immediate-check="false" :offset="50">
                <div class="content">
                  <div class="video-list" v-for="(item, index) in itm.itemVoList" :key="index">
                    <div @click="clickVideo(item.id)">
                    </div>
                    <div class="top-mark flex-center" v-if="item.auditStatus === pendingStauts || !item.auditStatus"
                      @click="showTips('5个工作日内完成审核')">正在审核中
                    </div>
                    <div class="top-mark flex-center" v-if="item.auditStatus === failStauts" style="color :#FF2C2C"
                      @click="showTips('审核未通过')">
                      <div class="fail-icon"></div>审核未通过，查看原因
                    </div>
                    <div class="top-mark flex-center" v-if="item.auditStatus === passStauts" style="color :#95DE64"
                      @click="clickVideo(item.id)">
                      <div class="pass-icon"></div>点击分享获取线索
                    </div>
                    <div @click="clickVideo(item.id)">
                      <div class="video-data flex-center" v-if="item?.playCount">
                        {{ item.playCount }}<span>次使用</span>
                      </div>
                      <div class="bottom-mark">
                        <div class="video-title double-ellipsis">{{ item.title }}</div>
                        <div class="avatar"
                          :style="{ background: item.authorHeadImage ? `url(${item.authorHeadImage})` : '' }">
                        </div>
                        <div class="author">{{ item.authorNickname }}</div>
                      </div>
                      <div class="video-item">
                        <video ref="myVideo" class="video" webkit-playsinline="true" playsinline="true" muted loop
                          autoplay="autoplay" :poster="item.cover">
                          <source :src="item.url" />
                          <p>您的浏览器不支持Video标签</p>
                        </video>
                      </div>
                    </div>
                  </div>
                </div>
              </van-list>
            </van-pull-refresh>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Toast } from 'vant';
import { reqMyVideo } from "../api";
import { Dialog } from 'vant';
import { getAccountInfos, headerHeight } from "@/../utils";
import "vant/es/toast/style";
import NavBar from '../components/NewNavbar.vue'
import centerImg from '../asset/icons/image_logo_top_w@3x.png'
import bannerImg from '../asset/icons/image_title_bg@3x.png'

// 定义头部及内容高度
let headerHeights = ref('44px')
if (headerHeight) {
  headerHeights.value = headerHeight()
}
const contentHeight = ref('100vh')
contentHeight.value = `calc(100vh - ${headerHeights.value})`
const doBack = () => {
  history.back();
}

// 定义审核状态
const failStauts = "0";
const passStauts = "1";
const pendingStauts = "2";

// 获取视频内容
const showlist = ref(true);
const userId = ref("");
const videoList = ref([
  {
    title: '我的跟拍',
    itemVoList: [],
  },
  {
    title: '我的创作',
    itemVoList: [],
  },
]);
onMounted(async () => {
  const { agentNo } = await getAccountInfos();
  userId.value = agentNo
  await getMyVideo(userId.value);
  getMyCreate(userId.value);
});

// 我的跟拍 左
const pageNumLeft = ref(1);
const getMyVideo = async (userId, isRefresh = false) => {
  loading.value = true;
  if (isRefresh) {
    var pageNumberLeft = 1;
    pageNumLeft.value = 2;
  } else {
    pageNumberLeft = pageNumLeft.value++;
  }
  let videoType = 1
  const { code, data, msg } = await reqMyVideo(userId, pageNumberLeft, videoType);
  if (code == 0 && data) {
    videoList.value[0].itemVoList.push(...data.itemVoList)
    loading.value = false;
    if (data.itemVoList.length === 0) {
      finished.value = true;
    }
  } else {
    Toast(`数据或网络异常\ncode${code} ${msg}`);
    finished.value = true;
    showlist.value = false;
  }
};

// 我的跟拍 右
const pageNumRight = ref(1);
const getMyCreate = async (userId, isRefresh = false) => {
  loading.value = true;
  if (isRefresh) {
    var pageNumberRight = 1;
    pageNumRight.value = 2;
  } else {
    pageNumberRight = pageNumRight.value++;
  }
  let videoType = 2
  const { code, data, msg } = await reqMyVideo(userId, pageNumberRight, videoType);
  if (code == 0 && data) {
    videoList.value[1].itemVoList.push(...data.itemVoList)
    loading.value = false;
    if (data.itemVoList.length === 0) {
      setTimeout(() => {
        finished.value = true;
      }, 2000);
    }
  } else {
    Toast(`数据或网络异常\ncode${code} ${msg}`);
    finished.value = true;
    showlist.value = false;
  }
};

// 列表上拉加载下拉刷新
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const onLoad = (idx) => {
  setTimeout(() => {
    idx === 0 ? getMyVideo(userId.value) : getMyCreate(userId.value);
  }, 500)
}
const onRefresh = (idx) => {
  finished.value = false;
  loading.value = true;
  if (refreshing.value) {
    videoList.value[idx].itemVoList = [];
    refreshing.value = false;
  }
  idx === 0 ? getMyVideo(userId.value, true) : getMyCreate(userId.value, true);
}

// 点击跳转
const clickVideo = (id, channel = '', from = "IpWorkshop") => {
  const isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  if (isIos) {
    window.location.href = `https://esales-local/ask_bob#visit?encodeJumpUrl=aipage://1106?isVideoList=2&needPreload=1&iOSNeedPush=1&tabKey=${channel}&videoId=${id}&directClose=1&requestCode=10001`;
  } else {
    const routerPath = `aipage://1106?isVideoList=2&needPreload=1&iOSNeedPush=1&tabKey=${channel}&videoId=${id}&directClose=1&requestCode=10001`;
    window.location.href = `https://esales-local/ask_bob#visit?encodeJumpUrl=aipage://1125?from=${from}&pageIndex=1&firstTabIndex=0&_coparams={"routerUrl":"${routerPath}"}`;
  }
};

// 展示提示弹窗 
const showTips = (message) => {
  console.log(message);
  Dialog({
    width: 280,
    message,
    confirmButtonText: '知道了',
    confirmButtonColor: 'grey'
  }).then(() => {
    return
  });
};

</script>

<style lang="less" scoped>
.container {

  .nav-bar {
    background-color: transparent;

    :deep(.center-img) {
      z-index: 999
    }

    :deep(.back-btn) {
      z-index: 999
    }
  }

  :deep(.van-tabs__nav) {
    background: transparent;
    height: 30px;
    position: fixed;
    z-index: 1;

    .van-tabs__line {
      background: #000000;
      height: 1.5px
    }

    .van-tab--active {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #000000;
      letter-spacing: 0;
      text-align: center;
      line-height: 20px;
      font-weight: 500;
    }
  }

  :deep(.van-list) {
    height: 100%;
  }

  .banner-bg {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100vw;
  }

  .content-wrapper {
    width: 100%;
    overflow: scroll;
    -webkit-overflow-scroll: touch;

    .content-box {
      padding-top: 10px;

      .content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 12px;

        .video-list {
          width: 170px;
          height: 284px;
          background: #CCCCCC;
          border-radius: 6px;
          margin-bottom: 10px;
          position: relative;
          overflow: hidden;

          .top-mark {
            width: 100%;
            height: 30px;
            position: absolute;
            top: 0;
            background: rgba(0, 0, 0, 0.40);
            border-radius: 6px 6px 0px 0px;
            text-align: center;
            font-family: PingFangSC-Medium;
            font-size: 13px;
            color: #FFFFFF;
            letter-spacing: 0;
            text-align: justify;
            line-height: 20px;
            font-weight: 500;

            .fail-icon {
              width: 16px;
              height: 16px;
              background: url("../asset/icons/warning@3x.png") no-repeat;
              background-size: 100% 100%;
              margin-right: 4px;
            }

            .pass-icon {
              width: 16px;
              height: 16px;
              background: url("../asset/icons/pass@3x.png") no-repeat;
              background-size: 100% 100%;
              margin-right: 4px;
            }
          }

          .video-data {
            position: absolute;
            padding: 0 10px;
            left: 10px;
            top: 180px;
            height: 20px;
            background: rgba(0, 0, 0, 0.50);
            border-radius: 10px;
            font-family: DINAlternate-Bold;
            font-size: 12px;
            color: #FFFFFF;
            line-height: 16px;
            font-weight: 700;

            span {
              font-family: PingFangSC-Regular;
              font-size: 12px;
              color: #FFFFFF;
              line-height: 16px;
              font-weight: 400;
            }
          }

          .bottom-mark {
            width: 100%;
            height: 79px;
            position: absolute;
            bottom: 0;
            background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.60) 49%, rgba(0, 0, 0, 0.70) 100%);
            border-radius: 6px;

            .video-title {
              width: 150px;
              height: 40px;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #FFFFFF;
              letter-spacing: 0;
              text-align: justify;
              line-height: 20px;
              font-weight: 400;
              margin-left: 10px;
            }

            .avatar {
              width: 20px;
              height: 20px;
              position: absolute;
              left: 10px;
              top: 45px;
              background: url('../asset/icons/author.png') no-repeat;
              background-size: 100% 100%;
            }

            .author {
              position: absolute;
              left: 35px;
              top: 45px;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #FFFFFF;
              letter-spacing: 0;
              text-align: center;
              line-height: 20px;
              font-weight: 400;
            }
          }

          .video-item {
            width: 170px;
            height: 100%;
            background: #F0F2F5;
            border-radius: 6px;

            .video {
              object-fit: cover;
              border-radius: 6px;
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
</style>